<template>
  <div>
    <van-sticky>
      <van-nav-bar title="充值" left-arrow @click-left="$router.go(-1)" />
    </van-sticky>
    <div class="conWrap">
      <div id="rechargeCode"></div>
      <p>{{ this.walletAddress }}</p>
      <button
      id="copyBtn"
      data-clipboard-action="copy"
      :data-clipboard-text="walletAddress"
    >
    复制钱包地址
    </button>
    </div>
  </div>
</template>

<script>
import { Sticky } from "vant";
import Clipboard from "clipboard";
import QRCode from "qrcodejs2"; // 引入qrcode
export default {
  data() {
    return {
      walletAddress: "aaacjsdfdvjlhnpop"
    };
  },
  created() {
    this.$toast.loading({
      message: "正在生成二维码...",
      mask: true,
      duration: 4000
    });
    setTimeout(()=>{
        let qrcode = new QRCode(document.getElementById("rechargeCode"), {
          width: 192,
          height: 192,
          text: `http://${window.location.host}/h5/#/mall?uuid=${this.walletAddress}` // 二维码内容
        });
    },4000)
       
  },
  mounted() {
    const clipboard = new Clipboard("#copyBtn");
    let _this = this;
    clipboard.on("success", function() {
      _this.$toast("复制成功");
    });
    clipboard.on("error", function() {
      this.$toast("复制失败");
    });
  },
  methods: {}
};
</script>
<style lang="less" scoped>
.conWrap {
  width: 341px;
  height: 325px;
  margin: 12px auto;
  font-size:15px;
  box-shadow: 0  0 6px 2px #f5f5f5;
  text-align: center;
  position: relative;
  padding-top:20px;
  border-radius: 5px;
}
#rechargeCode {
  border: 1px solid #fff;
  margin: 0 80px 30px; 
  img {
    width: 192px;
    height: 192px;
    padding: 4px;
  }
}
#copyBtn{
    width:207px;
    height:41px;
    background:#3B6EFC ;
    color:#fff;
    line-height: 1;
    text-align: center;
    border:0 none;
    border-radius:21px;
    margin-top:23px;
}
</style>
